<template>
   <div>
        <el-row style="font-size: 14px;padding-bottom: 5px;" v-if="userRole == 7">
          <el-col :span="4" style="padding-left: 10px;">
            <img height="35" width="150" :src="getLogo(item.bankType)" />
          </el-col>
          <el-col :span="10"  class="title">
            <div class="title">
              <span >{{item.bankType}}专用账户：<span style="font-weight: 700;">{{item.bankVirtualCard}}</span></span>
              <span style="padding-left:10px;">开户名称：<span style="font-weight: 700;">{{item.sydName}}</span></span>
            </div>
          </el-col>
          <el-col  class="title" style="margin-left: auto;text-align: end;" :span="4">
            <el-space>
              <el-button type="primary" plain @click="flushAccount(item)">刷新余额</el-button>
              <el-button type="primary" @click="tx(item)">提现</el-button>
            </el-space>
          </el-col>
        </el-row>
        <el-row style="font-size: 14px;padding-bottom: 5px;" v-if="userRole == 6">
          <el-col :span="4" style="padding-left: 10px;">
            <img height="35" width="150" :src="getLogo(item.bankType)" />
          </el-col>
          <el-col :span="10"  class="title">
            <div class="title">
              <span >{{item.bankType}}专用账户：<span style="font-weight: 700;">{{item.bankCard}}</span></span>
              <span style="padding-left:10px;">开户名称：<span style="font-weight: 700;">{{item.accName}}</span></span>
            </div>
          </el-col>
          <el-col  class="title" style="margin-left: auto;text-align: end;" :span="4">
            <el-space>
              <el-button type="primary" plain @click="flushAccount(item)">刷新余额</el-button>
              <el-button type="primary" @click="servicetx(item)">提现</el-button>
            </el-space>
          </el-col>
        </el-row>
        <el-row style="font-size: 14px;padding-bottom: 5px;" v-if="userRole == 8">
          <el-col :span="12" class="titleLeft" style="padding-left: 10px;">
            <img  src="" />
            <div class="titleLeft" style="padding-left: 10px;">
              <span >{{item.bankType}}银行账户：<span style="font-weight: 700;">{{item.bankCard}}</span></span>
              <span style="padding-left:10px;">开户名称：<span style="font-weight: 700;">{{item.channelName}}</span></span>
            </div>
          </el-col>
          <el-col  class="title" style="margin-left: auto;text-align: end;" :span="4">
            <el-space>
              <el-button type="primary" plain @click="flushAccount(item)">刷新余额</el-button>
              <el-button type="primary" @click="agentTx(item)">提现</el-button>
            </el-space>
          </el-col>
        </el-row>

        <el-row style="font-size: 14px;padding: 20px 15px;" v-if="userRole == 9">
          <el-col :span="3">
            <img width="150" height="45" :src="getLogo(item.bankType)" />
          </el-col>
          <el-col :span="15">
            <div>
              <div>归属账户方：<span style="font-weight: 700;">{{item.accName}}</span></div>
              <div style="margin-top: 10px;">{{item.bankType}}专用账户：<span style="font-weight: 700;">{{item.bankVirtualCard}}</span></div>
            </div>
          </el-col>
          <el-col style="margin-left: auto;text-align: end;" :span="4">
            <el-space>
              <el-button type="primary" @click="cz(item)">充值</el-button>
              <el-button type="primary" @click="merTx(item)"  v-has-permi="['payment:merchantAccount:cashout']">提现</el-button>
              <el-button type="primary" plain @click="flushAccount(item)">刷新余额</el-button>
            </el-space>
          </el-col>
        </el-row>
        <el-row justify="center" style="border-top: 1px solid #ccc;">
          <el-col :span="8">
            <div class="banlance-card">
              <img height="60" width="60" src="" alt="" />
              <span style="padding: 10px 0;font-size: 12px;">账户余额</span>
              <span class="money-text">￥{{numberFormat(item.balance)}}</span>
            </div>
          </el-col>
          <el-col :span="8">
            <div class="banlance-card">
              <img height="60" width="60" src="" alt="" />
              <span style="padding: 10px 0;font-size: 12px;">冻结金额</span>
              <span class="money-text">￥{{numberFormat(item.frozen)}}</span>
            </div>
          </el-col>
          <el-col :span="8">
            <div class="banlance-card">
              <img height="60" width="60" src="" alt="" />
              <span style="padding: 10px 0;font-size: 12px;">可用余额</span>
              <span class="money-text">￥{{numberFormat(item.balance - item.frozen)}}</span>
            </div>
          </el-col>
        </el-row>

        <BaDetail title="运营商收益列表" v-if="userRole == 7" :openCheck="yysOpenCheck" @dialogClose="yysDialogClose" :item="txItem"></BaDetail>
        <AgentTx :openCheck="agentTxOpen"  v-if="userRole == 8"  :txItem="txItem" @dialogClose="closeAgentTx" @flushDetail="flushAccount"></AgentTx>
        <ServiceTx :openCheck="ServiceTxOpen"  v-if="userRole == 6"  :txItem="txItem" @dialogClose="closeServiceTx" @flushDetail="flushAccount"></ServiceTx>
        <Cz :openCheck="czOpen"  v-if="userRole == 9"  :txItem="item" @dialogClose="czClose" @flushDetail="flushAccount"></Cz>
        <MerTx :openCheck="merTxOpen"  v-if="userRole == 9"  :txItem="txItem" @dialogClose="closeMerTx" @flushDetail="flushAccount"></MerTx>

      </div>





</template>


<script setup name="accItem" lang="ts">

  import  BaDetail from "@/views/operator/IncomBa/cashout/baDetail.vue"
  import  AgentTx from "@/views/operator/IncomBa/cashout/agentTx.vue"
  import ServiceTx from "@/views/operator/IncomBa/cashout/serviceTx.vue"
  import MerTx from "@/views/operator/IncomBa/cashout/merTx.vue"

  import Cz from "@/views/account/balance/cz.vue"

  import useUserStore from '@/store/modules/user'
 const props = defineProps(["item"])
 const emits = defineEmits(['flushAccount'])
 const { proxy } = getCurrentInstance() as ComponentInternalInstance;
 const { bank_logo } = toRefs<any>(proxy?.useDict('bank_logo'));

 const userRole = ref(0);
 const agentTxOpen = ref(false)
 const ServiceTxOpen = ref(false)
 const merTxOpen = ref(false);
 const czOpen = ref(false)

 const yysOpenCheck = ref(false);
 const txItem = ref({});

 const getLogo = ( bankName:string)=>{
     for(const vt of bank_logo.value){
        if(vt.label == bankName){
          return vt.value;
        }
     }
     return '--';
 }

 const agentTx = (item:any)=>{
   agentTxOpen.value = true;
   txItem.value = item;
 }

 const merTx = (item:any)=>{
   merTxOpen.value = true;
   txItem.value =  item;

 }

 const servicetx = (item:any)=>{
   ServiceTxOpen.value = true;
   txItem.value = item;
 }

 const closeAgentTx = ()=>{
     agentTxOpen.value = false;
 }

 const cz = (item:any)=>{
    czOpen.value = true;
    txItem.value = item;
 }


 const czClose = ()=>{
     czOpen.value = false;
 }

 const closeServiceTx = ()=>{
     ServiceTxOpen.value = false;
 }

 const closeMerTx = ()=>{
   merTxOpen.value = false;
 }

  const numberFormat = (input:number)=>{
      return proxy?.convertFenToYuan(input)
  }

  const flushAccount = (item)=>{
      emits('flushAccount',{item:item});
  }

  const yysDialogClose = (params)=>{
    if(params.tag == 1){
        yysOpenCheck.value = false;
    }

  }

  //提现
  const tx = (item)=>{
      yysOpenCheck.value = true;
      txItem.value =  item;
      console.log(yysOpenCheck.value)
  }



   onMounted(() => {
     let curRoleId = useUserStore().curRoleId;
     userRole.value = curRoleId;
    });
</script>



<style scoped  lang="scss">
  .banlance-card {
    padding: 40px 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    .money-text {
        font-size: 24px;
        color: #333;
    }
  }

 .titleLeft{
    display: flex;
    justify-content: start;
    align-items: center;
  }

 .title{
    display: flex;
    justify-content: start;
    align-items: center;
  }



  .demo-form-inline .el-input {
    --el-input-width: 220px;
  }

  .demo-form-inline .el-select {
    --el-select-width: 220px;
  }
</style>
